<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>socket.io</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <div id="messages" style="height:500px; overflow:auto;">

    </div>

    <script src="./asyncMessager.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <script>
        const socket = io("http://localhost:3000");

        function appendMessage(message) {
            messages.innerHTML += `<div>${JSON.stringify(message)}</div>`
        }

        function sendMessage(msg) {
            socket.emit("message", msg)
        }

        const asyncMessager = new AsyncMessager.BaseAsyncMessager({
            subscribe(onMessage) {
                function onSocketMessage(msg) {
                    onMessage(msg);
                }
                socket.on("message", onSocketMessage);
                return () => {
                    socket.off("message", onSocketMessage);
                }
            },
            request(data, key) {
                sendMessage(data);
            }
        });

        socket.on("connect", () => {
            appendMessage("connect")
            asyncMessager.invoke({
                method: "getUsers",
                data: {
                    user: 123456,
                    token: "blabla......"
                }
            }).then(res => appendMessage(res))
        });
        asyncMessager.addHandler("timeInfo", function (data) {
            // console.log("index.html:timeInfo", data);
            appendMessage(data)
        });
    </script>

</body>

</html>